<template>
    <div>
        <TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
        <div class="container">
            <TableCustom :columns="columns" :tableData="tableData" :total="page.total"
                :delFunc="handleDelete" :changePage="changePage" :change-page-size="changePageSize" :currentPage="page.page" :pageSize="page.page_size">
                <template #pay_status="{rows}">
                    <el-tag v-if="rows.pay_status == 1" type="success">已支付</el-tag>
                    <el-tag v-else type="danger">未支付</el-tag>
                </template>
                <template #o_status="{rows}">
                    <el-tag v-if="rows.o_status == -1" type="danger">已取消</el-tag>
                    <el-tag v-else-if="rows.o_status == 0" type="warning">待支付</el-tag>
                    <el-tag v-else-if="rows.o_status == 1" type="info">已支付</el-tag>
                    <el-tag v-else type="success">已取镜</el-tag>
                </template>
                <template #o_order_code="{rows}">
                    <el-button type="primary" link @click="gotoDetail(rows)">{{rows.o_order_code}}</el-button>
                </template>
                <!-- 3  状态为1  -->
                <template #operator="{rows}">
                    <el-button :disabled="!((rows.o_status == 1 || rows.o_status == 0)  && !rows.y_num)"  type="warning" size="small" :icon="RefreshLeft" @click="cancelOrder(rows)">取消订单</el-button>
                </template>
            </TableCustom>

        </div>
    </div>
</template>

<script setup lang="ts" name="collaborativeAdministrator-user">
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, RefreshLeft } from '@element-plus/icons-vue';
import { User } from './types/cooperUser';
import { query_order_list, cancel_order, delete_cooperation_user } from '@/api';
import TableCustom from '@/components/table-custom.vue';
import TableSearch from '@/components/table-search.vue';
import { FormOption, FormOptionList } from '@/types/form-option';
import { useRouter } from 'vue-router';
const getNowTime = () => {
    return `${new Date().getFullYear()}-${(new Date().getMonth() + 1) > 9 ? (new Date().getMonth() + 1) : '0' + (new Date().getMonth() + 1)}-${new Date().getDate() > 9 ? new Date().getDate() : '0' + new Date().getDate()}`
}
// 查询相关
const query = reactive({
    data_time: [getNowTime(), getNowTime()],
    o_order_code: null,
    o_status: null,
    user_phone: null,
    o_pay_status: null,
    // area: '',
});
// 查询条件相关
const searchOpt = ref<FormOptionList[]>([
    { type: 'daterange', label: '查询时间：', prop: 'data_time', placeholder: '请选择时间范围', format: 'YYYY-MM-DD'},
    { type: 'area', label: '行政区划：', prop: 'area', placeholder: '请选择行政区划'},
    { type: 'input', label: '订单编号:', prop: 'o_order_code', placeholder: '请输入订单编号' },
    { type: 'input', label: '租户手机号码:', prop: 'user_phone', placeholder: '请输入租户手机号码' },
    { type: 'select', label: '订单状态:', prop: 'o_status', placeholder: '请输入订单状态', opts: [{value: -1, label: "已取消"},  {value: 0, label: "待支付"}, {value: 1, label: "已支付"},  {value: 2, label: "已取镜"}] },
    { type: 'select', label: '支付状态:', prop: 'o_pay_status', placeholder: '请输入支付状态', opts: [{value: 0, label: "未支付"},  {value: 1, label: "已支付"}] }
])
const handleSearch = () => {
    console.log(query)
    changePage(1);
};

// 表格相关
let columns = ref([
    { prop: 'user_telphone', label: '租户名称', width: 90 },
    { prop: 'user_telphone', label: '租户联系电话', width: 120 },
    { prop: 'o_order_code', label: '订单编号' },
    { prop: 'o_real_money', label: '押金总金额', width: 180 },
    { prop: 'pay_status', label: '支付状态', width: 90 },
    { prop: 'o_pay_time', label: '付款时间', width: 120 },
    { prop: 'o_start_time', label: '订单时间', width: 120 },
    { prop: 'o_status', label: '订单状态', width: 90 },
    { prop: 'operator', label: '操作', width: 250 },
])
const router = useRouter();
//  跳转详情
const gotoDetail = (row) => {
    router.push({
        name: 'galssOrder-orderInfoDetail',
        query: {o_order_code: row.o_order_code},
    })
}

const page = reactive({
    page: 1,
    page_size: 10,
    total: 0,
})
const tableData = ref<User[]>([]);
const getData = async () => {
    const res = await query_order_list({page: page.page, page_size: page.page_size, ...query})
    tableData.value = res.data.data_list;
    page.total = res.data.total;
};
getData();

const changePage = (val: number) => {
    console.log(val)
    page.page = val;
    getData();
};
const changePageSize = (val: number) => {
    page.page_size = val;
    getData();
};

// 新增/编辑弹窗相关
let options = ref<FormOption>({
    labelWidth: '150px',
    span: 20,
    list: [
        { type: 'select', label: '上级合作管理员', prop: 'c_superior_code', required: false, placeholder: '请选择上级合作管理员' },
        { type: 'input', label: '合作管理员名称', prop: 'c_user_name', required: true, placeholder: '请输入合作管理员名称' },
        { type: 'input', label: '联系人姓名', prop: 'c_contacts_name', required: true, placeholder: '请输入联系人姓名' },
        { type: 'input', label: '联系人电话', prop: 'c_contacts_phone', required: true, placeholder: '请输入联系人电话' },
        { type: 'input', label: '联系人地址', prop: 'c_contacts_area', required: true, placeholder: '请输入联系人地址' },
        
        { type: 'custom_area', label: '行政区划', prop: 'custom_area', required: true, placeholder: '请选择行政区划' },
        { type: 'select', label: '所属银行', prop: 'c_bank_name', required: false, placeholder: '请选择所属银行' },
        { type: 'input', label: '结算账户', prop: 'c_bank_account', required: false, placeholder: '请输入合作结算账户' },
        { type: 'input', label: '结算账号', prop: 'c_bank_code', required: false, placeholder: '请输入结算账号' },
        { type: 'input', label: '支行名称', prop: 'c_bank_real_name', required: false, placeholder: '请输入支行名称' },
        { type: 'textarea', label: '备注', prop: 'c_remarks', required: false, placeholder: '请输入备注' },
    ]
})
const visible = ref(false);
const isEdit = ref(false);
const rowData = ref({});
const handleEdit = (row: User) => {
    row.custom_area = [`${row.c_province}`, `${row.c_city}`, `${row.c_area}`];
    rowData.value = { ...row };
    isEdit.value = true;
    visible.value = true;
};

const closeDialog = () => {
    visible.value = false;
    isEdit.value = false;
};


// 删除相关
const handleDelete = (row: User) => {
    ElMessageBox.confirm('确定要删除吗？', '提示', {
        type: 'warning'
    })
        .then(async () => {
            delete_cooperation_user({c_u_code: row.c_u_code }).then(res => {
                if (res.code == '1000') {
                    getData();
                    ElMessage.success('删除成功');
                }
            })
        })
        .catch(() => { });
    
}

const cancelOrder = (row: User) =>  {
    ElMessageBox.confirm('确定要取消订单吗？', '提示', {
        type: 'warning'
    })
        .then(async () => {
            cancel_order({o_order_code: row.o_order_code }).then(res => {
                if (res.code == '1000') {
                    getData();
                    ElMessage.success('取消成功');
                }
            })
        })
        .catch(() => { });
}
</script>

<style scoped></style>